<template>
    <div class="title">选项式应用程序接口(option API)</div>
    <div class="unitBar">
        <span>双向绑定 v-model</span>
    </div>
    <div class="vmodel inner">
        <span>初始金额&nbsp;:</span><span>{{ numAmount }}</span>
        <input type="text" v-model="numAmount" class="inputTest">
        <button @click="addnumAmount">执行一个函数使numAmount变量的值++</button>
    </div>
    <hr>
    <div class="unitBar">
        <span>v-for</span>
        <span>显示全部公司</span>
    </div>
    <div class="unitBar">
        <table class="vforTable">
            <tr>
                <th>编号</th>
                <th>Name</th>
                <th>国家</th>
                <th>URL</th>
            </tr>
            <tr v-for="jsonitem in Arraycompanies" :key="jsonitem.id">
                <td>{{ jsonitem.id }}</td>
                <td>{{ jsonitem.name }}</td>
                <td>{{ jsonitem.state }}</td>
                <td>{{ jsonitem.url }}</td>
            </tr>
        </table>
    </div>
    <hr>
    <div class="unitBar">
        <span>筛选中国公司-filter</span>
    </div>
    <div class="unitBar">
        <table class="vforTable">
            <tr>
                <th>编号</th>
                <th>Name</th>
                <th>国家</th>
                <th>URL</th>
            </tr>
            <tr v-for="jsonitem in ArrayFuncompanies()" :key="jsonitem.id">
                <td>{{ jsonitem.id }}</td>
                <td>{{ jsonitem.name }}</td>
                <td>{{ jsonitem.state }}</td>
                <td>{{ jsonitem.url }}</td>
            </tr>
        </table>
    </div>
    <div class="inner">
        <button @click="setValFunAddCompany">新增公司</button>
    </div>
</template>
<script>
export default {
    name: 'OptionAPI',
    data() {
        return {
            numAmount: 100,
            Arraycompanies: [
                {
                    id: 1,
                    name: 'Google',
                    url: 'http://www.google.com',
                    state: 'USA'
                },
                {
                    id: 2,
                    name: 'Baidu',
                    url: 'http://www.baidu.com',
                    state: 'PRC'
                },
                {
                    id: 3,
                    name: 'Tencent',
                    url: 'http://www.tencent.com',
                    state: 'PRC'
                },
                {
                    id: 4,
                    name: 'ByteDance',
                    url: 'http://www.bytedance.com',
                    state: 'PRC'
                },
                {
                    id: 5,
                    name: 'Microsoft',
                    url: 'http://www.microsoft.com',
                    state: 'USA'
                },
                {
                    id: 6,
                    name: 'Alibaba',
                    url: 'http://www.alibaba.com',
                    state: 'PRC'
                },
            ]
        }
    },
    methods: {
        addnumAmount() {
            this.numAmount++;
            console.log('@',document.querySelector('.inputTest').value);
        },
        ArrayFuncompanies() {
            let resultArray = this.Arraycompanies.filter((item) => {
                return item.state === 'PRC'
            });
            return resultArray;
        },
        setValFunAddCompany() {
            this.Arraycompanies.push(
                {
                    id: 7,
                    name: 'Apple',
                    url: 'http://www.apple.com',
                    state: 'USA'
                },
                {
                    id: 8,
                    name: 'DJT',
                    url: 'http://www.djt.com',
                    state: 'PRC'
                }
            );
        }
    }
}
</script>
<style scoped>


.vmodel>input {
    display: block;
    outline: none;
    margin-top: 10px;
}

button {
    display: block;
}

hr {
    border: 0;
}

.vforTable {
    width: 500px;
    text-align: center;
}
</style>